<!--
 * @Description: 工程管理
 * @Author: wangwangwang
 * @Date: 2020-08-17 15:52:03
 * @LastEditors: wangwangwang
 * @LastEditTime: 2020-08-18 15:19:23
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-right: 12px;">工程名称</span>
                <el-input v-model="tableParam.name" style="width: 200px;" clearable />
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">客户名称</span>
                <el-input v-model="tableParam.roadwork" style="width: 20%;max-width: 200px;" clearable />
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card" style="padding-top: 10px;">
          <div v-loading="tableLoading" class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
              <el-table-column align="center" label="序号">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="code" label="合同号"></el-table-column>
              <el-table-column align="center" label="工程名称">
                <template slot-scope="scope">
                  <span style="color: #008200;cursor: pointer;" @click="datails(scope.row)">{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="roadwork" label="客户名称"></el-table-column>
              <el-table-column align="center" prop="startTime" label="交底时间"></el-table-column>

              <el-table-column align="center" prop="principal" label="负责人"></el-table-column>
              <el-table-column align="center" prop="rateOfProgress" label="处别"></el-table-column>
              <el-table-column align="center" label="经济效益">
                <template slot-scope="scope">
                  <el-link class="table_link" :underline="false" @click="details(scope.row)">查看</el-link>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="expectedAmount" label="累计考核利润"></el-table-column>
            </el-table>
          </div>
          <div class="card_bottom">
            <div class="card_bottom_left">
              <div class="top_page_totle">总共{{ total }}条</div>
              <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
            </div>
            <div>
              <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <el-dialog v-dialogDrag :visible.sync="detailsDialog" width="980px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">效益评估登记</span>
      <div class="dialoginfo" style="padding: 0 20px;">
        <div class="dialoginfo-title">
          <div>
            <span class="text">工程名称：</span>
            {{ low.name }}
          </div>
          <div>
            <span class="text">合同单位：</span>
            {{ low.businesName }}
          </div>
          <div>
            <span class="text">施工工期：</span>
            {{ low.createTime }}-{{ low.updateTime }}
          </div>
        </div>
        <div style="padding: 20px 0px 10px 0;">
          <el-button size="mini" class="bottom_all" style="margin-left: 0;" @click="addItem()">
            <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
            添加
          </el-button>
        </div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="list" tooltip-effect="dark">
          <el-table-column label="年月" align="center" prop="monthSharding"></el-table-column>
          <el-table-column label="销量" align="center" prop="sales"></el-table-column>
          <el-table-column label="综合单价(分)" align="center" prop="unitPrice"></el-table-column>
          <el-table-column label="产值(分)" align="center" prop="outputValue"></el-table-column>
          <el-table-column label="营业务成本(分)" align="center" prop="cost"></el-table-column>
          <el-table-column label="财务费用(分)" align="center" prop="financialExpense"></el-table-column>
          <el-table-column label="结算调整(分)" align="center" prop="settlementAdjustment"></el-table-column>
          <el-table-column label="考核利润(分)" align="center" prop="profit"></el-table-column>
          <el-table-column label="操作" align="left">
            <template slot-scope="scope">
              <el-link class="table_link" :underline="false" @click="updateItem(scope.row)">修改</el-link>
              <el-link class="table_link" :underline="false" @click="delItem(scope.row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="detailsDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag :visible.sync="itemDialog" width="800px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">添加/修改</span>
      <div class="dialoginfo" style="padding: 0 20px;">
        <el-form ref="reffromDate" :rules="rules" :model="itemDate" :inline="true" label-width="110px">
          <el-form-item prop="sales">
            <span slot="label">销量</span>
            <el-input v-model="itemDate.sales" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="unitPrice">
            <span slot="label">综合单价(分)</span>
            <el-input v-model="itemDate.unitPrice" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="cost" label-width="120px">
            <span slot="label">营业务成本(分)</span>
            <el-input v-model="itemDate.cost" style="width: 230px;" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="financialExpense">
            <span slot="label">财务费用(分)</span>
            <el-input v-model="itemDate.financialExpense" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="settlementAdjustment">
            <span slot="label">结算调整(分)</span>
            <el-input v-model="itemDate.settlementAdjustment" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="itemDialog = false">关 闭</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="submititem()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import {
  queryPage,
  getLists,
  deletes,
  saveOrUpdate,
} from "@/api/internetSales/economic.js";
export default {
  components: {},
  mixins: [mixin],
  data() {
    return {
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 0,
      detailsDialog: false,
      low: "",
      list: [],
      itemDate: {},
      itemDialog: false,
      rules: {
        sales: [{ required: true, message: "请输入", trigger: "blur" }],
        unitPrice: [{ required: true, message: "请输入", trigger: "blur" }],
        cost: [{ required: true, message: "请输入", trigger: "blur" }],
        financialExpense: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        settlementAdjustment: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.tableParam = { ...this.tableParam };
    this.gettableData();
  },
  methods: {
    init() {
      /*重置数据*/
      this.tableParam.name = "";
      this.tableParam.roadwork = "";
      this.gettableData();
    },
    getList() {
      getLists({ enginnerId: this.low.id }).then((res) => {
        this.list = res.data;
      });
    },
    details(low) {
      this.low = low;
      this.getList();
      this.detailsDialog = true;
    },

    addItem() {
      let _this = this;
      _this.item = {};
      _this.itemDialog = true;
      setTimeout(() => {
        _this.$refs.reffromDate.clearValidate();
      }, 10);
    },
    updateItem(item) {
      this.itemDialog = true;
      setTimeout(() => {
        this.$refs.reffromDate.clearValidate();
        this.itemDate = item;
      }, 10);
    },
    submititem() {
      this.$refs.reffromDate.validate((valid) => {
        if (valid) {
          let data = {
            id: this.itemDate.id,
            enginnerId: this.low.id,
            sales: this.itemDate.sales,
            unitPrice: this.item.unitPrice,
            cost: this.itemDate.cost,
            financialExpense: this.itemDate.financialExpense,
            settlementAdjustment: this.itemDate.settlementAdjustment,
          };
          saveOrUpdate(data).then(() => {
            this.getList();
            this.itemDialog = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    delItem(low) {
      this.$confirm("此操作将永久删除该信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "bottom_all_two",
        confirmButtonClass: "bottom_all",
        type: "warning",
      })
        .then(() => {
          deletes({ id: low.id }).then(() => {
            this.getList();
          });
        })
        .catch(() => { });
    },
  },
};
</script>

<style lang="scss" scoped>
.dialoginfo-title {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #808080;
  .text {
    font-weight: bold;
    font-size: 16px;
    color: #000;
  }
}
.el-input,
.el-select {
  width: 240px;
}

.table_link {
  margin-left: 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
</style>
